<template>
  <div id="bigPage">
    <div id="tip">主页 > 订单管理</div>
    <div id="prompt">
      <span @click="setSaid(1)">购买订单</span>
      <span @click="setSaid(2)">出售订单</span>
      <span @click="setSaid(3)">我的收藏</span>
    </div>
    <div id="said">
      <div id="one" v-if="this.said == 1">购买订单还没有开发！</div>
      <div id="two" v-if="this.said == 2">出售订单还没有开发！</div>
      <div id="three" v-if="this.said == 3">
        <ul>
          <li class="card" v-for="datas in listdata" :key="datas.gid">
            <!-- @click="toDetailed(defaults.text,datas.id)"> :href="'/detailed?id='+datas.id" -->
            <a
              @click="toDetailed(datas)"
              style="text-decoration: none"
              target="_blank"
            >
              <img :src="require('@/assets/' + datas.url)" :alt="datas.gname" />
              <!-- <p id="money">{{ datas.price }}</p>
              <p id="name">{{ datas.gname }}</p>
              <p id="date">{{ datas.date }}</p> -->
            </a>
          </li>
        </ul>
      </div>
    </div>
    <router-view></router-view>
  </div>
</template>
  
  <script>
import Detailed from "../components/Detailed";
import VueCookies from "vue-cookies";
import axios from "axios";
import router from "../router";

export default {
  props: ["root"],
  components: {
    Detailed,
  },
  methods: {
    setSaid: function (said) {
      this.uid = JSON.parse(VueCookies.get("uid"));
      if (!this.uid) {
        alert("未登录，请先登录！");
        return false;
      } else {
        this.said = said;
        switch (said) {
          case 1:
            break;
          case 1:
            break;
          case 3:
            this.getGoods();
            break;
        }
      }
    },
    // 跳转到详细页面，通过id查询
    toDetailed: function (datas) {
      this.uid = JSON.parse(VueCookies.get("uid"));
      if (!this.uid) {
        alert("未登录，请先登录！");
        return false;
      } else {
        // 跳转到发布路由组件
        router.replace({
          name: "Lookreservation",
          // 当page页面需要tips信息去渲染，就传，前其他不用传tips
          params: {
            datas: datas,
            returnOne:'Reservation',//指定返回的页面
          },
        });
      }
    },
    getGoods: function () {
      axios({
        method: "POST",
        url: "http://localhost:8081/lo/intercept/collections/getgoodsforcollections",
        params: {
          uid: VueCookies.get("uid"),
          ucookie: VueCookies.get("ucookie"),
        },
        headers: {
          headers: {
            "Content-Type": "application/x-www-form-urlencoded",
          },
        },
      }).then(
        (response) => {
        //   console.log(response.data);
          // 直接将信息展示
          this.listdata = response.data;
          this.page = this.listdata.length == 0 ? 0 : 1;
        },
        (error) => {
          alert("请求失败,请检查服务器是否开启！");
        }
      );
    },
  },
  data() {
    return {
      said: 0,
      page: 0,
      datas: {
        gid: "",
        gname: "",
        price: "",
        date: "",
        detailed: "",
        gtype: "",
        url: "logo.png",
      },
      listdata: {},
    };
  },
};
</script>
  
  <style scoped>
@font-face {
  font-family: "iconfont";
  src: url("../fonts/iconfont_four.ttf") format("truetype");
}
* {
  list-style-type: none;
  font-family: "iconfont" !important;
}
#bigPage {
  width: 75%;
  height: 900px;
  position: absolute;
  top: 70px;
  left: 21%;
  background-color: #eee;
}
#bigPage #tip {
  width: 100%;
  height: 30px;
  background-color: #fff;

  line-height: 30px;
}

#bigPage #tip::before {
  content: "\f012b";
  padding-left: 20px;
  padding-right: 10px;
}

#prompt span {
  display: inline-block;
  width: 24%;
  height: 120px;
  margin-top: 20px;
  margin-left: 7%;
  text-align: center;
  line-height: 120px;
  background-size: 100% 150px;
  font-size: 30px;
  color: #fff;
  border-radius: 20px;
  cursor: pointer; /* 经过有手指*/
}

#prompt span:nth-child(1) {
  background-image: url("@/assets/1.webp");
}

#prompt span:nth-child(2) {
  background-image: url("@/assets/2.webp");
}

#prompt span:nth-child(3) {
  background-image: url("@/assets/3.webp");
}

#three ul {
  height: 620px;
  overflow-y: auto;
}

#three ul::-webkit-scrollbar {
  width: 10px;
}

#three ul::-webkit-scrollbar-track {
  background-color: rgb(249, 249, 249);
}

#three ul::-webkit-scrollbar-thumb {
  box-shadow: inset 0 0 6px rgb(190, 186, 186);
}

#said div {
  width: 90%;
  margin-left: 5%;
  margin-top: 30px;
  height: 620px;
  /* border: 1px solid rebeccapurple; */
}

.card {
  display: inline-block;
  width: 18%;
  /* height: 400px; */
  text-align: center;
  margin-left: 5%;
  margin-bottom: 5%;
  cursor: pointer; /* 经过有手指*/
  box-shadow: 0px 0px 10px 3px #aaa;
}

.card img {
  width: 100%;
  height: 200px;
}

/* .card p {
  text-align: left;
  margin-left: 20px;
  margin-top: 8px;
  margin-bottom: 0px;
  border: 0px;
} */

/* .card #money {
  font-size: 20px;
  color: rgb(238, 11, 11);
}
.card #name {
}
.card #date {
  font-size: 13px;
  color: #a9a9b3;
} */
</style>